<template>
  <a-layout class="order-detail">
    <a-layout-content>
      <a-page-header style="background: #fff">
        <template v-slot:title>
          <span @click="back" class="iconfont icon-fanhui3"></span>
          <span class="title">结单详情</span>
        </template>
      </a-page-header>
      <div class="detail-wrapper">
        <div class="detail-left" v-for="(item,index) in list" :key="index">
          <div class="top">
            <p>
              <span>收货人</span>
              <span>共记件数</span>
              <!-- <span>已优惠</span> -->
              <span>合计</span>
            </p>
            <p>
              <span>{{ item.delivery_address }}</span>
              <span>{{ item.qty }}</span>
              <!-- <span>{{ item.qty }}</span> -->
              <span>￥{{ item.order_amount / 100 }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="bottom-info-wrap">
        <div class="item">
          <span class="label">结算单号</span>
          <span class="value">{{ info.order_no }}</span>
        </div>
        <div class="item">
          <span class="label">结算时间</span>
          <span class="value">{{ formatDate(info.created_at) }}</span>
        </div>
        <div class="item">
          <span class="label">实付</span>
          <span class="value money">￥{{ info.pay_amount / 100 }}</span>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>


<script>
import orderAccount from "@/api/orderAccount"

export default {
  name: "order-detail",
  props: {
    // record: {
    // 	type: [Object],
    // 	default() {
    // 		return {}
    // 	},
    // },
  },
  data () {
    return {
      list: [],
      info: {}
    }
  },
  created () {
    this.getOrderDetail(this.$route.params.id)
  },
  methods: {
    formatDate (timeStr) {
      return this.$formatDate("Y-M-D h:m:s", +new Date(timeStr))
    },
    back () {
      // this.$emit("handleTable")
      this.$router.back()
    },
    getOrderDetail (id) {
      orderAccount
        .paymentDetail(id)
        .then((res) => {

          if (res.code !== 1) {
            return this.$message.warning(res.message)
          }
          this.list = res.list
          this.info = res.data
        })
        .catch((e) => { })
    },
  },
}
</script>

<style lang="less" >
.order-detail {
  // background: #eee;
  padding: 15px;
  .icon-fanhui3 {
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
  }
  .title {
    vertical-align: middle;
  }

  .detail-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .detail-left {
      width: 100%;
      .top {
        background: #fff;
        p {
          margin: 0;
          padding: 0;
          display: grid;
          grid-auto-flow: row;
          grid-template-columns: calc(100% / 2) calc(100% / 4) calc(100% / 4);
          grid-template-rows: repeat(1, 40px);
          align-items: center;
          padding-left: 15px;
          position: relative;
          font-size: 14px;
          &:first-of-type {
            font-size: 16px;
            font-weight: bold;
            &::after {
              content: "";
              display: inline-block;
              border-bottom: 1px solid #ccc;
              width: calc(100% - 20px);
              position: absolute;
              left: 10px;
              bottom: 0;
            }
          }
          &:nth-of-type(2) {
            span {
              padding-left: 10px;
            }
          }
        }
      }
    }
  }

  .bottom-info-wrap {
    display: flex;
    justify-content: right;
    margin-top: 20px;
    .item {
      margin-right: 30px;
      .label {
        color: rgba(153, 153, 153, 1);
        margin-right: 30px;
      }
      .money {
        color: rgba(231, 146, 58, 1);
        font-size: 16px;
      }
    }
  }
}
</style>
